<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文详情</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <style>
        body {
            color: #333;
            margin-top: 20px;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            justify-content: space-between;
            width: 80%;
            margin: auto;
            /* background: #fff; */
            padding: 20px;
        }
        .sidebar {
            width: 20%;
            background: #f9f9f9;
            color: #333;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .content {
            width: 75%;
            background: #fff;
            color: #333;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .panel {
            margin-bottom: 20px;
        }
        .panel-heading {
            background-color: #f9f9f9;
            color: #333;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        .list-group-item {
            border: none;
            padding: 10px;
            background: #fff;
        }
        .list-group-item-heading {
            margin: 0;
            color: #333;
        }
        .list-group-item-text {
            color: #666;
        }
        .navbar {
            background-color: #333;
            /* color: #333; */
            margin-bottom: 20px;
        }
        .navbar-brand {
            color: #333;
        }
        .navbar-nav > li > a {
            color: #fff;
        }
        .navbar-nav > li > a:hover {
            background-color: #555;
        }
        .footer {
            text-align: center;
            padding: 10px 0;
            background-color: #333;
            color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .brand-link {
            font-size: 24px; 
            font-weight: bold; 
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand brand-link" href="/blog"style="color:white">博客-“张三”的文章</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="sidebar">
            <h4>博文分类</h4>
            <ul class="list-group">
                <li class="list-group-item">分类 1</li>
                <li class="list-group-item">分类 2</li>
                <li class="list-group-item">分类 3</li>
            </ul>
            <h4>热门博文</h4>
            <ul class="list-group">
                <li class="list-group-item">热门博文标题 1</li>
                <li class="list-group-item">热门博文标题 2</li>
            </ul>
        </div>
        <div class="content">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">当前博文标题</h3>
                </div>
                <div class="panel-body">
                    <p>发表于: 2024-12-08</p>
                    <p>这里是完整的文章内容... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
                    <p>Proin porttitor, orci nec nonummy暮mporttitor, est quam egestas diam, a faucibus pede semper est, vitae magna. Vivamus tincidunt fermentum quam. Curabitur重力 sed nibh. In hac habitasse platea dictumst. Integer ac nisi. Pellentesque ultricies mattis odio. Donec vitae nisi.</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <p>© 2024 Mini Blog. All rights reserved.</p>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>